import * as Icon from "@/icons/feather/feather";
import { createVNode, ref } from "vue";


export default function Page () {
    const size = ref(32)
    const family = ref("Eva")
    const keys = Object.keys(Icon);
    const icons = ref<string[]>(keys)

    // createEffect(() => {
    //     // const icons = keys.filter(item => item.startsWith(family()));
    //     setIcons(keys);
    // })

    return <div>
            {/* <div><span style="font-size: 32px;">Airplanex国<Icon.F7Clear strokeWidth={1} size={size()} />国xAirplane</span></div>
            <div><span style="font-size: 32px;">Airplanex国<Icon.FeatherSquare strokeWidth={1} size={size()} />国xAirplane</span></div>
            <div><span style="font-size: 32px;">Airplanex国<Icon.IoniconsInformationCircle strokeWidth={1} size={size()} />国xAirplane</span></div>
            <div><span style="font-size: 32px;">Airplanex国<Icon.BiInfoCircleFill strokeWidth={1} size={size()} />国xAirplane</span></div> */}
            {/* <div><span style="font-size: 32px;">Airplanex国<Icon.TablerInfoCircleFilled strokeWidth={1} size={size()} />国xAirplane</span></div> */}
            <Icon.FeatherPlus class="asd" style="asd"/>
            
        <div class="list-wrap" style={{
            'font-size': size.value + 'px',
            color: 'red'
        }}>
            {
                icons.value.map((icon) => {
                    const comp = (Icon as any)[icon];
                    return <div class="icon-item">
                        <comp class="asd"/>
                        <div>{icon}</div>
                    </div>
                })
            }
        </div>
    </div>
}